﻿@using RTW.Model;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["Title"] = "湖北省检察院档案管理系统 - 统计管理";
}

@section Head{
    <style>
        .layui-table-cell.laytable-cell-1-0-2 {
            padding: 0 2px;
        }

        td[data-field=dwid] input {
            height: 28px;
        }

        .layui-table-body, .layui-table-box, .layui-table-cell {
            overflow: visible !important;
        }

        .layui-form-select dl {
            top: 29px !important;
        }
        #ManageTableicon .layui-iconpicker {margin:0 auto;
        }
        #ManageTableicon .layui-iconpicker-item{margin:0 auto;}
        #updateimg .layui-row {
            margin: 10px 0;
        }
        #updateimg .layui-form-item{margin-left:17%;}
        #colorpicker1 {
            margin: 0 auto;
        }
        #test-form-input1 {
            position: absolute;
            left: 85px;
            top: 6px;
            height: 40px;
            z-index:1;
        }
    </style>
}

<div class="layui-fluid">
    <table id="Mtable" class="table" lay-filter="Mtable"></table>
</div>

<script type="text/html" id="switch">
    {{#  if(d.hmzt==1){ }}
    <input type="checkbox" name="mlzt" lay-skin="switch" lay-text="是|否" checked value="1">
    {{#  } else { }}
    <input type="checkbox" name="mlzt" lay-skin="switch" lay-text="是|否" value="1" >
    {{#  } }}
</script>
<script type="text/html" id="DWtext">
    {{#  if(d.dwid==1){ }}
    湖北省人民检察院
    {{#  } else { }}
    湖北省人民检察院
    {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
    <a class="layui-btn layui-btn-sm" lay-event="update" id="update">编辑</a>
</script>
<script type="text/html" id="toolbarDemo1">
    <a class="layui-btn layui-btn-sm"    lay-event="btn1" id="btn1" style="margin:10px 10px;">保存</a>
</script>
@*图标颜色选择器*@
<div id="updateimg" style="display:none;">
    <div class="layui-row">
        <div id="ManageTableicon">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" placeholder="请选择图标" class="layui-input" id="test-form-input1">
            </div>
                <input type="text" name="icon" id="iconFonts" value="" class="layui-input">
            
        </div>
        </div>
    <div class="layui-row">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="colorpicker1"></div>
                </div>
            </div>
        </form>
    </div>

</div>


@section scripts{
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
            , IconFonts: 'iconFonts/iconFonts'
        }).use(['element', 'index', 'table', 'form', 'IconFonts', 'jquery', 'colorpicker', 'layer'], function () {
            var table = layui.table,
                layer = layui.layer,
                index = layui.index,
                colorpicker = layui.colorpicker,
                form = layui.form,
                element = layui.element,
                $ = layui.jquery,
                IconFonts = layui.IconFonts;

            table.render({
                elem: '#Mtable',
                url: '/Unit/Role/GetManageTableJson'
                , toolbar: '#toolbarDemo1'
                ,height:800
                , cols: [[
                    { field: 'hmid', title: 'ID', sort: true, align: "center" }
                    , { field: 'hmmc', title: '门类名称', edit: true, align: "center" }
                    , { field: 'dwid', title: '单位名称', align: "center", templet: "#DWtext", style:"color: crimson;"}
                    , { field: 'hmzt', title: '是否展示', templet: "#switch", align: "center", event:"check1"}
                    , { field: 'hmbz', title: '门类备注', edit: true, align: "center" }
                    , { field: 'hmsx', title: '门类顺序', edit: true, align: "center", sort: true }
                    , { align: "center", title: '图像操作', templet: toolbarDemo }
                    , { field: 'hmtx', title: '门类图像', edit: true,}
                    , { field: 'hmys', title: '门类背景色', edit: true, align: "center"}
                    , { field: 'hmlj', title: '门类路径', edit: true, hide: true, align: "center" }
                ]]
            })
            table.on('toolbar(Mtable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'btn1':
                        var data = layui.table.cache.Mtable;
                         $.ajax({
                            data: { data: JSON.stringify(data) },//json数据格式
                            url: '/Unit/Role/PostManageTableJson',
                            async: true,
                            type: 'post',
                            dateType: 'json',
                            success: function (data) {
                                if (data.status == 200) {
                                    layer.msg(data.msg)
                                } else {
                                    layer.msg(data.msg)
                                }
                            }
                        });
                    break;
                }
            })
            //编辑事件
            table.on('tool(Mtable)', function (obj) {
                
                var checkStatus = table.checkStatus(obj.config);
                switch (obj.event) {
                    case 'update':
                        $("#test-form-input1").val(obj.data.hmtx);
                        $("#test-form-input").val(obj.data.hmys);
                         layer.open({
                            type: 1,
                            content: $('#updateimg')
                            , title:'图像选择'
                            , skin: 'demo-class'
                            , area: ['500px', '350px']
                            , anim: 5
                            , btn: ['确定', '取消']
                            , btn1: function (index, layero) {
                                obj.update({
                                    hmtx: $("#test-form-input1").val(),
                                    hmys: $("#test-form-input").val()
                                })
                                layer.closeAll();
                            },
                            btn2: function (index, layero) {
                                layer.closeAll();
                            }
                        });
                        break;
                    case 'check1':
                        if (obj.data.hmzt == '0') {
                            obj.update({
                                hmzt: "1"
                            })
                            $(obj.tr).find("td[data-field=hmzt] input").after('<div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>是</em><i></i></div>')

                        } else if (obj.data.hmzt== '1')  {
                            obj.update({
                                hmzt: "0"
                            })
                            $(obj.tr).find("td[data-field=hmzt] input").after('<div class="layui-unselect layui-form-switch" lay-skin="_switch"><em>否</em><i></i></div>')
                        }
                        break;
                };
            });

            //颜色选择器
            //表单赋值
            colorpicker.render({
                elem: '#colorpicker1'
                , color: '#1c97f5'
                , done: function (color) {
                    $('#test-form-input').val(color);
                }
            });

            //图标选择器
            IconFonts.render({
                // 选择器，推荐使用input
                elem: '#iconFonts', //选择器ID
                // 数据类型：fontClass/layui_icon，
                type: 'layui_icon',
                // 是否开启搜索：true/false
                search: false,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 24,
                // 点击回调
                click: function (data) {
                    $("#test-form-input1").val(data.icon)
                }
            });
        })
    </script>

}

